import dom, { ajax, domg } from "../../init.js";
import { obj } from "../../index.js";
import event from "./eventhanle.js";
import { commemt, rescomment } from "../../../util/interface.js";
import user from "../user/eventhandle.js";

(async () => {
  const res = await ajax.get("/comment/getall");
  const data = JSON.parse(res as string) as rescomment;
  if (!data.data) return alert(data.msg);
  (domg(".commentCount") as any).innerText = data.data.count;
})();

export async function initcomment() {
  const res = await ajax.get("/comment/getall");
  const data = JSON.parse(res as string) as rescomment;
  if (!data.data) return alert(data.msg);
  (domg(".commentCount") as any).innerText = data.data.count;
  const str = `          
  <div id='comments'>
    <div class="comment">
      <h2>index: comment</h2>
      <hr style="width: 98.8%;">
    </div>
    <div class='commentinput'>
      <textarea id="commentcontent" resize:none; cols="20" rows="10" placeholder='发一条友好的评论....'></textarea>
      <div class="box">
        <div class="button">${obj.islogin ? "提交留言" : "登录注册"}</div>
        <div class='commentcount'>已有<span class="allcommentcount">${
          data.data.count
        }</span>条留言</div>
      </div>
    </div>
    <ul class="commentlist">
    </ul>
  </div>`;
  dom.content.content.innerHTML = str;
  domg("#comments>.commentinput .button").onclick = obj.islogin
    ? event.clickSubmit
    : user.mubucheblock;
  updatecommentlist(data.data.rows);
}

function updatecommentlist(arr: Array<commemt>) {
  if (arr.length <= 0) {
    return (domg("#comments ul.commentlist").innerHTML =
      "<h3>没有数据或者数据出错</h3>");
  }
  arr.forEach((item, index) => {
    const str = `      
    <li>
      <div class="commentuser" data-index=${item.id}>
        <div class="commentuserimg" style="background-image: url('${
          item.imgUrl
        }')"></div>
        <div class="contentuserinfo">
          <p class="username">${item.name} ${
      item.name == dom.user.name.innerText ? '<span class="my">我</span>' : ""
    }</p>
          <p class="usercreatedtime">${item.createdTime}</p>
          <p class="p1" data-index=${item.id} data-dev=${index + 1}>
            <span class="iconfont icon-icon zanicon${isclass(
              "zan",
              item.id
            )}"></span>
            <span class="zan">${item.zan}</span>
            <span class="iconfont icon-cai caiicon${isclass(
              "cai",
              item.id
            )}"></span>
            <span class="cai">${item.cai}</span>
          </p>
        </div>
      </div>
      <div class="content">
        ${item.content}
      </div>
      <hr>
    </li>`;
    const ul = domg("#comments ul.commentlist");
    ul.insertAdjacentHTML("beforeend", str);
    (ul.children[ul.children.length - 1] as HTMLElement).onclick = event.zancai;
  });
}

function isclass(str: "zan" | "cai", id: number) {
  if (!localStorage.getItem(`commentis${id}`)) return "";
  if (str === "zan") {
    if (localStorage.getItem(`commentis${id}`) === "1") {
      return " iszancai";
    } else if (localStorage.getItem(`commentis${id}`) === "2") {
      return " nozancai";
    }
  } else if (str === "cai") {
    if (localStorage.getItem(`commentis${id}`) === "2") {
      return " iszancai";
    } else if (localStorage.getItem(`commentis${id}`) === "1") {
      return " nozancai";
    }
  }
}
